<template>
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">告警统计</text></view>
					</template>
					<view class="flex m-between s-center">
						<u-tabs lineWidth="30" lineColor="#2172FC" :list="[{ name: '日' }, { name: '月' }, { name: '年' }]"
							:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }" @click="fn"
							itemStyle="width:40px;height:44px" />
					</view>
					<my-grid :list="list" :col="3" imgWidth="30%" class="m-t-10" @click="click" />
				</u-collapse-item>

				<!-- <u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">风险趋势</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ontouch />
					</view>
				</u-collapse-item>
				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">隐患分布</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item> -->

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">预警趋势</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="opts3" :chartData="chartData3" ontouch />
					</view>
				</u-collapse-item>
				<!-- 	<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">预警处理效率</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="mix" :opts="opts4" :chartData="chartData4" />
					</view>
				</u-collapse-item> -->
				<u-collapse-item name="6">
					<template #title>
						<view class="content-item-title"><text class="title-txt">传感器在线率</text></view>
					</template>
					<view class="p-y-10 p-x-20 b-r-4 m-b-10 flex m-between s-center" style="background: #f5f7fe">
						<view class="flex s-center">
							<image :src="getImgUrl('cgq.png')" lazy-load mode="heightFix" style="height: 40rpx"
								class="m-r-5" />
							<text class="f-s-16">传感器数量：</text>
						</view>
						<view class="flex s-center">
							<up-count-to bold class="m-r-5" :endVal="total" color="#0052D9" />
							个
						</view>
					</view>

					<my-table :columns="[
							{
								label: '设备',
								prop: '设备'
							},
							{
								label: '在线率',
								prop: '设备在线率'
							}
						]" :data="tableList" />
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
	import {
		getByApiCode,
		callApiBySuffix,
		getApiFabric
	} from '@/api/customApi';

	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	/**************************************基础数据*************************************************/
	const collapse = ref(null),
		showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7]);

	/****************************************告警统计****************************/
	let list = ref([{
			img: 'index/wcl.png',
			key: '未处理',
			title: '未处理',
			value: 0,
			unit: '条'
		},
		{
			img: 'index/zs.png',
			key: '处理中',
			title: '处理中',
			value: 0,
			unit: '条'
		},
		{
			img: 'index/ycl.png',
			key: '已处理',
			title: '已处理',
			value: 0,
			unit: '条'
		}
	]);

	const apiCode = ['jinrigaojingtongji', 'yuegaojingrongji', 'niangaojingtongji'];

	function fn({
		index = 0,
		name = '日'
	} = {}) {
		getByApiCode({
			apiCode: apiCode[index],
			propertyMapping: {
				key: 'name',
				val: 'val'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list.value.forEach((item) => {
				item.value = data[item.key];
			});
			nextTick(() => {
				collapse.value.init();
			});
		});
	}

	// function msgFn() {
	// 	uni.switchTab({
	// 		url: '/pages/message/index'
	// 	});
	// }

	const click = (name) => {
		if (name.title == '未处理') {
			uni.$store.user.current = 0;
		} else if (name.title == '处理中') {
			uni.$store.user.current = 1;
		} else {
			uni.$store.user.current = 2;
		}
		uni.switchTab({
			url: '/pages/message/index'
		});
	};

	/****************************************风险趋势****************************/
	let chartData = ref({}),
		opts = {
			color: ['#FF0000', '#FFA500', '#ffff00', '#0000FF'],
			padding: [0, 0, 0, 0],
			enableScroll: true,
			dataLabel: false,
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 10,
				fontSize: 10,
				itemGap: 10
			},
			xAxis: {
				itemCount: 6
			},
			extra: {
				line: {
					type: 'straight',
					width: 2,
					activeType: 'hollow'
				}
			}
		};

	function fn2() {
		getByApiCode({
			apiCode: 'FENGXIANQUSHIFENXI',
			propertyMapping: {
				x: 'month',
				y1: 'level1val',
				y2: 'level2val',
				y3: 'level3val',
				y4: 'level4val'
			}
		}).then((res) => {
			const resData = res.data.reduce(
				(prev, cur) => {
					if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
					prev.series1.push(Number(cur.y1));
					prev.series2.push(Number(cur.y2));
					prev.series3.push(Number(cur.y3));
					prev.series4.push(Number(cur.y4));
					return prev;
				}, {
					categories: [],
					series1: [],
					series2: [],
					series3: [],
					series4: []
				}
			);
			chartData.value = {
				categories: resData.categories,
				series: [{
						name: '重大风险',
						data: resData.series1
					},
					{
						name: '较大风险',
						data: resData.series2
					},
					{
						name: '一般风险',
						data: resData.series3
					},
					{
						name: '低风险',
						data: resData.series4
					}
				]
			};
		});
	}
	/****************************************隐患分布****************************/
	const chartData2 = ref({}),
		opts2 = {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [0, 0, 0, 0],
			dataLabel: true,
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 10,
				fontSize: 10,
				itemGap: 10
			},
			title: {
				name: 0,
				fontSize: 25,
				color: '#000'
			},
			subtitle: {
				name: '隐患',
				fontSize: 15,
				color: '#000'
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF',
					linearType: 'custom'
				}
			}
		};

	function fn3() {
		getByApiCode({
			apiCode: 'YINGHUANFENBU',
			propertyMapping: {
				s: 'name',
				y: 'DANGERCOUNT'
			}
		}).then((res) => {
			let total = 0;
			res.data.forEach((item) => {
				item.name = item.s;
				item.value = item.y * 1;
				total = total + item.value;
				delete item.s;
				delete item.y;
			});
			opts2.title.name = total;
			chartData2.value = JSON.parse(
				JSON.stringify({
					series: [{
						data: res.data
					}]
				})
			);
		});
	}

	/**************************************预警趋势************************************/
	const chartData3 = ref({}),
		opts3 = {
			...opts,
			color: ['#91CB74', '#FC8452']
		};

	function fn4() {
		getByApiCode({
			apiCode: 'YUJINGQUSHIFENXI',
			propertyMapping: {
				x: 'x',
				y1: 'y1',
				y2: 'y2'
			}
		}).then((res) => {
			const resData = res.data.reduce(
				(prev, cur) => {
					if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
					prev.series1.push(Number(cur.y1));
					prev.series2.push(Number(cur.y2));
					return prev;
				}, {
					categories: [],
					series1: [],
					series2: []
				}
			);
			chartData3.value = {
				categories: resData.categories,
				series: [{
						name: '已处理',
						data: resData.series1
					},
					{
						name: '处理中',
						data: resData.series2
					}
				]
			};
		});
	}

	/**************************************预警处理效率************************************/
	const chartData4 = ref({}),
		opts4 = {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [0, 0, 0, 0],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 10,
				fontSize: 10,
				itemGap: 10
			},
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				disabled: false,
				disableGrid: false,
				splitNumber: 5,
				gridType: 'dash',
				dashLength: 4,
				gridColor: '#CCCCCC',
				padding: 10,
				showTitle: false,
				data: [{
						position: 'left',
						title: '柱状图'
					},
					{
						position: 'right',
						title: '点',
						min: 0,
						max: 1
					}
				]
			},
			extra: {
				mix: {
					column: {
						linearType: 'opacity',
						linearOpacity: 0.5
					}
				}
			}
		};

	function fn5() {
		getByApiCode({
			apiCode: 'YUJINGCHULIXIAOLVFENXI',
			propertyMapping: {
				x: 'DEPT_NAME',
				y: 'diffH',
				z: 'difF72H'
			}
		}).then((res) => {
			const resData = res.data.reduce(
				(prev, cur) => {
					if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
					prev.series1.push(Number(cur.y));
					prev.series2.push(Number(cur.z));
					return prev;
				}, {
					categories: [],
					series1: [],
					series2: []
				}
			);
			chartData4.value = {
				categories: resData.categories,
				series: [{
						name: '停留平均时间(h)',
						index: 0,
						type: 'column',
						data: resData.series1
					},
					{
						name: '效率(72-avg(h))',
						index: 1,
						type: 'point',
						color: '#f04864',
						data: resData.series2
					}
				]
			};
		});
	}

	/**************************************传感器在线率************************************/
	const tableList = ref([]),
		total = ref(0);

	function fn6() {
		getApiFabric({
			apiCode: 'c2aaa50a-dfd1-440e-991e-0bec1e456349',
			propertyMapping: {
				total: 'total'
			}
		}).then((res) => {
			total.value = res.data[0].total;
		});
		getApiFabric({
			apiCode: '266e3c9d-e11d-40f4-8a45-ea5fafd91475',
			propertyMapping: {
				设备: 'device',
				设备在线率: 'rate'
			}
		}).then((res) => {
			tableList.value = res.data;
			nextTick(() => {
				collapse.value.init();
			});
		});
	}

	function getServerData(refresh) {
		Promise.all([fn(), fn2(), fn3(), fn4(), fn5(), fn6()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh();
				});
			}
		});
	}

	onShow(() => {
		getServerData();
	});

	onPullDownRefresh(() => {
		getServerData(true);
	});
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	// .title {
	// 	font-size: 28rpx;
	// 	color: #8f8f94;
	// }

	.leader-list {
		margin-top: -20rpx;

		.leader-list-item {
			background: #f5f7fe;
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052d9;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.line-progress {
		text-align: left;
		line-height: 60rpx;
		font-size: 15px;
		padding: 5rpx;
	}

	.list_left {
		text-align: left;
		margin: 5rpx;
		font-size: 14px;
	}

	.list_conten {
		color: #2472f1;
		margin: 0rpx 5rpx;
	}

	.list_right {
		float: right;
	}

	.grid {
		.unit {
			font-size: 24rpx;
			color: #828893;
			margin-left: 8rpx;
			float: right;
		}
	}

	.u-border-bottom {
		border-bottom-width: 10rpx !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}

	.u-border-right {
		border-right-width: 10rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}

	.grid_box {
		height: 100rpx;
		line-height: 100rpx;
	}

	.grid_left {
		float: left;
		margin-right: 50rpx;
		display: flex;
	}

	.grid_conten {
		color: #2472f1;
		float: right;
	}

	.charts_box {
		height: 500rpx;
	}
</style>